<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .sidebar {
      width: 250px;
      height: 100vh;
      background: #333;
      position: fixed;
      left: 0;
      top: 0;
      transition: width 0.3s ease;
    }
    .sidebar.collapsed {
      width: 60px;
    }
    .target {
      position: absolute;
      left: 260px;
      top: 20px;
      transition: left 0.3s ease;
    }
    #toggle-sidebar {
      position: fixed;
      left: 10px;
      top: 10px;
      z-index: 100;
    }
  </style>
</head>
<body>
  <button id="toggle-sidebar">切换侧边栏</button>
  <div id="sidebar" class="sidebar collapsed"></div>
  <div id="target-element" class="target">我会随着侧边栏移动！</div>

  <script>
    const sidebar = document.getElementById('sidebar');
    const targetElement = document.getElementById('target-element');
    const toggleButton = document.getElementById('toggle-sidebar');

    toggleButton.addEventListener('click', () => {
      sidebar.classList.toggle('collapsed');
      updateTargetPosition();
    });

    function updateTargetPosition() {
      const isCollapsed = sidebar.classList.contains('collapsed');
      const sidebarWidth = isCollapsed ? 60 : 250;
      targetElement.style.left = `${sidebarWidth + 10}px`;
    }

    // 初始化
    updateTargetPosition();
  </script>
</body>
</html>